<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Introduction to Ionize development : Ionize User Guide</title>

<style type='text/css' media='all'>@import url('../userguide.css');</style>
<link rel='stylesheet' type='text/css' media='all' href='../userguide.css' />

<script type="text/javascript" src="../nav/nav.js"></script>
<script type="text/javascript" src="../nav/prototype.lite.js"></script>
<script type="text/javascript" src="../nav/moo.fx.js"></script>
<script type="text/javascript" src="../nav/user_guide_menu.js"></script>
<script type="text/javascript" src="../video/swfobject.js"></script>

<meta http-equiv='expires' content='-1' />
<meta http-equiv= 'pragma' content='no-cache' />
<meta name='robots' content='all' />
<meta name='author' content='Ionize Dev Team' />
<meta name='description' content='Ionize User Guide' />

</head>
<body>

<!-- START NAVIGATION -->
<div id="nav"><div id="nav_inner"><script type="text/javascript">create_menu('../');</script></div></div>
<div id="nav2" onclick="myHeight.toggle();"><a name="top"></a><a href="javascript:void(0);"><img src="../images/nav_toggle_darker.jpg" width="154" height="43" border="0" title="Toggle Table of Contents" alt="Toggle Table of Contents" /></a></div>
<div id="masthead">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td><h1>Ionize User Guide Version 0.9.7</h1></td>
<td id="breadcrumb_right"><a href="../toc.html">Table of Contents Page</a></td>
</tr>
</table>
</div>
<!-- END NAVIGATION -->


<!-- START BREADCRUMB -->
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td id="breadcrumb">
<a href="http://www.ionizecms.com/">Ionize Home</a> &nbsp;&#8250;&nbsp;
<a href="../index.html">User Guide Home</a> &nbsp;&#8250;&nbsp;
Introduction to Ionize Admin
</td>
<td id="searchbox"><form method="get" action="http://www.google.com/search"><input type="hidden" name="as_sitesearch" id="as_sitesearch" value="ionizecms.com/user-guide" />Search User Guide&nbsp; <input type="text" class="input" style="width:200px;" name="q" id="q" size="31" maxlength="255" value="" />&nbsp;<input type="submit" class="submit" name="sa" value="Go" /></form></td>
</tr>
</table>
<!-- END BREADCRUMB -->

<br clear="all" />


<!-- START CONTENT -->
<div id="content">

<h1>Introduction to Ionize Admin</h1>

<p>This chapter will not focus on what is a controller, how Ionize's controllers load models or connect to the database.</p>
<p>If you want to learn more about these topics, visit the <a href="http://www.codeigniter.com" target="_blank">CodeIgniter website</a>, because Ionize is based on CodeIgniter.</p>

<p>But...</p>

<p>You will learn the basic of the Ionize administration panel and how the Ionize interface works.</p>

<p>These chapters also describe some specific Ionize libraries.</p>



<h2>Admin Panel folders organization</h2>

<p>Except for the <kbd>/themes/admin/</kbd> folder, the Ionize administration folder organization follows the standard CodeIgniter application organization.</p>


<h3>Important Admin panel folders</h3>

<table cellpadding="0" cellspacing="1" border="0" style="width:100%" class="tableborder">
<tr>
	<th>Folder</th>
	<th>Usage</th>
	<th>Description</th>
</tr>
<tr>
	<td class="td"><strong>/application/controllers/admin/</strong></td>
	<td class="td">Controllers</td>
	<td class="td">All administration controllers</td>
</tr>
<tr>
	<td class="td"><strong>/application/libraries/</strong></td>
	<td class="td">Libraries</td>
	<td class="td">Librairies shared by the admin panel and the website</td>
</tr>
<tr>
	<td class="td"><strong>/application/language/</strong></td>
	<td class="td">Admin panel languages files</td>
	<td class="td">
		The translations files are used by the admin panel and aren't loaded when the website loads.<br/>
		<kbd>Important : The language folders name follows the ISO 639-1 standardized nomenclature.</kbd>
	</td>
</tr>
<tr>
	<td class="td"><strong>/application/models/</strong></td>
	<td class="td">Models</td>
	<td class="td">Models shared by the admin panel and the website</td>
</tr>
<tr>
	<td class="td"><strong>/application/views/core/</strong></td>
	<td class="td">Views</td>
	<td class="td">Default website page and article views. These views have nothing to do with the admin panel.</td>
</tr>
<tr>
	<td class="td"><strong>/themes/admin/</strong></td>
	<td class="td">Admin panel UI</td>
	<td class="td">Contains all the Administration Panel assets, the Admin javascript UI files and the admin views.</td>
</tr>
</table>




<h2>Admin controllers</h2>

<p>During the install process, you choose an admin URL, for example <var>admin123</var>.</p>
<p>All calls to <dfn>http://your_domain.tld/</dfn><var>admin123</var> will route to the corresponding controller in <kbd>/application/controllers/admin/</kbd> folder.</p>



<h2>How do the Admin panel starts ?</h2>

<p>If the user's does not have at least the editor level (1000), he can be connected to the website but not to the Administration panel.</p>

<p>All Admin controllers inherit from <dfn>MY_Admin()</dfn>, which is protected by the Ionize <dfn>Connect()</dfn> library.</p>

<p>The only not protected controller is <dfn>User()</dfn>, which displays the login panel.</p>

<p>Once the user is connected, the default admin controller <dfn>Desktop()</dfn> is called.</p>

<img src="../images/ionize_admin_startup.jpg" />

<h3>Administration panel loading process :</h3>

<ol>
	<li>The <dfn>Dekstop()</dfn> controller loads the view : <var>/themes/admin/views/desktop.php</var>,</li>
	<li>The <var>desktop.php</var> view displays the top menu and loads several JS libs, including the <strong>Mocha UI</strong> application and the <dfn>init-ionize.js</dfn> lib,</li>
	<li><dfn>initializeColumns()</dfn> (in init-ionize) creates the centrals 2 columns (<var>#sideColumn</var> and <var>#mainColumn</var>) and calls through XHR :
		<ol>
			<li>the <dfn>Structure()</dfn> controller for displaying the website structure in the side column</li>
			<li>the <dfn>Dashboard()</dfn> controller for displaying the dashboard in the main column.</li>
		</ol>
	</li>
</ol>

<p class="important">
	Once the desktop is loaded, all other content is loaded through XHR, using Mocha UI or Ionize's javascript libraries which extends Mocha.
</p>

<h3>What's important in the loading process ?</h3>

<ul>
	<li>The <strong>Mocha UI</strong> javascript application : located in <kbd>/themes/admin/javascript/mocha/mocha.js</kbd></li>
	<li>The <strong>Ionize init</strong> functions :  located in <kbd>/themes/admin/javascript/mocha/init-ionize.js</kbd></li>
</ul>


<h2>The Ionize Javascript framework : An extension of Mocha UI</h2>

<p>TODO...</p>



</div>
<!-- END CONTENT -->


<div id="footer">
<p>
Previous Topic:&nbsp;&nbsp;<a href="xxx.html">xxx</a>
&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="#top">Top of Page</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="../index.html">User Guide Home</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
Next Topic:&nbsp;&nbsp;<a href="xxx.html">xxx</a>
</p>
<p><a href="http://www.ionizecms.com/">Ionize website</a></p>
</div>

</body>
</html>